<template>
  <PageWrapper >
    <div ref="searchForm">
      <div style="border-bottom: 1px solid #eee; padding-bottom: 10px; font-size: 16px">
        <Icon :icon="getTitle.icon" class="m-1 pr-1" />
        <span> {{ getTitle.value }} </span>
      </div>
      <!-- @submit="handleSubmit" @reset="handleReset"  -->
      <div style="display: flex;">
        <div style="flex: 1;">
          <BasicForm ref="form" @register="registerForm" />

        </div>
        <div style="display: flex;flex-direction: column;justify-content: space-around;margin: 0 50px;">
          
          <a-button type="primary" class="mt-2" @click="readBarCode">
            <Icon icon="ant-design:global-outlined" /> {{ t('识别') }}
          </a-button>
          
          <a-button type="primary" class="mt-2" @click="checkBarCode">
            <Icon icon="ant-design:sync-outlined" /> {{ t('检验') }}
          </a-button>
        </div>
      </div>
      <div style="margin-top: 20px;padding: 10px;">
        <div style="margin-bottom: 10px;">
          输出：
        </div>
        {{result}}
      </div>
    </div>


  </PageWrapper>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'ViewsTestBarcodeTestList',
  });
</script>
<script setup lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { PageWrapper } from '/@/components/Page';
  import { schemasData } from '/@/utils/custom';
  import { checkBar, readBar } from '/@/api/test/testData';
  import { router } from '/@/router';
  import { Icon } from '/@/components/Icon';
  import { useGlobSetting } from '/@/hooks/setting';
  import { reportData } from '/@/api/test/testData';
  import { useLoading } from '/@/components/Loading';
  const { t } = useI18n('test.barcodeTest');
  const { ctxPath } = useGlobSetting();
  const getTitle = ref({
    icon: router.currentRoute.value.meta.icon || 'ant-design:book-outlined',
    value: router.currentRoute.value.meta.title || t('条码测试'),
  });

  let result = ref<any>('')
  //配置表单内容
  const schemas = ref<FormSchema[]>();
    const inputFormSchemas: FormSchema[] = [
    {
      label: t('条码内容'),
      field: 'cbarcode',
      component: 'Input',
      componentProps: {
        maxlength: 200,
        allowClear: true,
      },
      required: true,
    },

    // {
    //   label: t('多行文本'),
    //   field: 'testTextarea',
    //   component: 'InputTextArea',
    //   componentProps: {
    //     maxlength: 200,
    //   },
    //   rules: [{ required: true }],
    //   colProps: { lg: 24, md: 24 },
    // },
    {
      label: t('条码类型'),
      field: 'barType',
      component: 'Select',
      componentProps: {
        dictType: 'bar_type',
        allowClear: true,
      },
    },
    {
      label: t('箱码类型'),
      field: 'boxBarType',
      component: 'Select',
      componentProps: {
        dictType: 'bar_box_type',
        allowClear: true,
      },
    },
    
    
    
  ];


  const [registerForm, { getFieldsValue, validate, setProps, setFieldsValue }] = useForm({
    labelWidth: 90,
    schemas: inputFormSchemas,
    showActionButtonGroup: false,
    baseColProps: { lg: 24, md: 24 },
    showAdvancedButton: false,
    compact: true,
  });
  const [openFullLoading, closeFullLoading] = useLoading({
    tip: '加载中...',
  });

  async function readBarCode() {
    try {
      const data = await validate();
      openFullLoading();
      console.log('data====', data);
      const res = await readBar(data);

      result.value = res
      showMessage(res.message);
     
    } catch (error: any) {
      if (error && error.errorFields) {
        showMessage(t('您填写的信息有误，请根据提示修正。'));
      }
      console.log('error', error);
    } finally {
      closeFullLoading();
    }
  }
  async function checkBarCode() {
    try {
      const data = await validate();
      openFullLoading();
      console.log('data====', data);
      const res = await checkBar(data);
      result.value = res
      showMessage(res.message);
     
    } catch (error: any) {
      if (error && error.errorFields) {
        showMessage(t('您填写的信息有误，请根据提示修正。'));
      }
      console.log('error', error);
    } finally {
      closeFullLoading();
    }
  }

 
</script>
